Animated Navigation Bar

Home / Web Code Snippet / Animated Navigation Bar

Animated Navigation Bar



HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title></title>
</head>
<body>
<div class="navbar">
    <ul>
        <li class="list active">
            <a href="#">
                <span class="icon"><i class="fa-solid fa-house"></i></span>
                <span class="name">Home</span>
            </a>
        </li>
        <li class="list">
            <a href="#">
                <span class="icon"><i class="fa-solid fa-user"></i></span>
                <span class="name">User</span>
            </a>
        </li>
        <li class="list">
            <a href="#">
                <span class="icon"><i class="fa-solid fa-message"></i></span>
                <span class="name">Message</span>
            </a>
        </li>
        <li class="list">
            <a href="#">
                <span class="icon"><i class="fa-solid fa-phone"></i></span>
                <span class="name">Contact</span>
            </a>
        </li>
        <li class="list">
            <a href="#">
                <span class="icon"><i class="fa-solid fa-gear"></i></span>
                <span class="name">Setting</span>
            </a>
        </li>
            <div class="indicate"></div>
    </ul>
</div>
</body>
</html>

CSS CODE:-

    body{
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: black;
        }
        .navbar{
            width: 400px;
            height: 70px;
            background: white;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }
        .navbar ul{
            display: flex;
            width: 350px;
        }
        .navbar ul li{
            position: relative;
            list-style: none;
            width: 65px;
            height: 65px;
            z-index: 1;
        }
        .navbar ul li a{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            text-align: center;
            font-weight: 500;
            text-decoration: none;
        }
        .navbar ul li a .icon{
            position: relative;
            display: block;
            line-height: 65px;
            text-align: center;
            font-size: 25px;
            transition: 0.5s;
            color: black;
        }
        .navbar ul li.active a .icon{
            transform: translateY(-35px);
            color:white;
        }
        .name{
            position: absolute;
            color:black;
            transition: 0.5s;
            opacity: 0;
            transform: translateY(20px);
        }
        .navbar ul li.active a .name{
            opacity: 1;
            transform: translateY(10px);
        }       
        .indicate{
            position: absolute;
            top: -50%;
            width: 55px;
            height: 55px;
            background: #1f02c9;
            border-radius: 50%;
            border: 5px solid black;
            transition: 0.5s;
        }
        .indicate::before{
            content: "";
            position: absolute;
            top: 50%;
            left: -20px;
            width: 20px;
            height: 20px;
            background: transparent;
            border-top-right-radius: 20px;
            box-shadow: 0px -10px 0 0 black;
        }
        .indicate::after{
            content: "";
            position: absolute;
            top: 50%;
            right: -20px;
            width: 20px;
            height: 20px;
            background: transparent;
            border-top-left-radius: 20px;
            box-shadow: 0px -10px 0 0 black;
        }
        .navbar ul li:nth-child(1).active ~ .indicate{
            transform: translateX(calc(65px*0));
        }
        .navbar ul li:nth-child(2).active ~ .indicate{
            transform: translateX(calc(65px*1));
        }
        .navbar ul li:nth-child(3).active ~ .indicate{
            transform: translateX(calc(65px*2));
        }
        .navbar ul li:nth-child(4).active ~ .indicate{
            transform: translateX(calc(65px*3));
        }
        .navbar ul li:nth-child(5).active ~ .indicate{
            transform: translateX(calc(65px*4));
        }

JS CODE:-

    const list = document.querySelectorAll('.list');
    function activeLink(){
        list.forEach((item) =>
        item.classList.remove('active'));
        this.classList.add('active');
    }
    list.forEach((item) =>
    item.addEventListener('click',activeLink));